<template>
  <div class="nav_bg">
    <div class="center">
      <el-row>
        <el-col :span="18">
          <ul>
            <li>
              <router-link to="/user/index">主页</router-link>
            </li>
            <li>
              <router-link to="/#">关于我们</router-link>
            </li>
            <li>
              <router-link to="/user/search/">产品展示</router-link>
            </li>
            <li>
              <router-link to="/#">联系我们</router-link>
            </li>
            <li>
              <router-link to="/#">帮助中心</router-link>
            </li>
          </ul>
        </el-col>
        <el-col :span="6">
          <ul class="user">
            <template v-if="user.userInfo">
              <li @click="logout">
                <router-link to="#">退出登录</router-link>
              </li>
              <li>
                <router-link to="/user/center">{{ user.userInfo.username }}</router-link>
              </li>
              <li>
                <router-link to="/user/cart">
                  <el-icon style="top: 3px"><ShoppingCart /></el-icon> 购物车
                </router-link>
              </li>
            </template>
            <template v-else>
              <li>
                <router-link to="/user/login">登录</router-link>
              </li>
              <li>
                <router-link to="/user/reg">注册</router-link>
              </li>
            </template>
          </ul>
        </el-col>
      </el-row>
    </div>
  </div>

  <!-- 头部搜索 -->
  <div class="center">
    <el-row>
      <el-col :span="16">
        <img src="@/assets/logo.jpg" style="height: 70px;border-radius: 50%">
      </el-col>
      <el-col :span="8">
        <div class="search">
          <el-input v-model="searchInfo" placeholder="搜索商品" type="text" class="search_input" @input="goToSearch"/>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 商品分类 -->
  <div class="center" >
    <ul class="category" style="border-radius: 7px;margin-bottom: 2px">
      <li v-for="(category, index) in parentList" :key="index">
        <router-link :to="`/user/search/${category.id}`">{{ category.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import {Discount, Search} from "@element-plus/icons-vue";
import categoryApi from "@/api/categoryApi.js";
import {ref} from "vue";
import {userStore} from "@/stores/user.js";
import {tokenStore} from "@/stores/token.js";
import router from "@/router/index.js";
import {searchStore} from "@/stores/search.js";

// 获取登录用户信息
const user = userStore()
// token
const token = tokenStore()

// 服务器地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVICE_ADDR)
// 已上架的父分类
const parentList = ref([])

// 搜索信息
const searchInfo = ref('')
const search = searchStore()

// 获取父分类  上架分类
const getParent = () => {
  let condition = {
    parentId: 0,
    status: 1
  }
  categoryApi.getParentInfo(1)
      .then(resp => {
        parentList.value = resp.data
      })
}

// 注销
const logout = () => {
//   清空token
  token.$reset()
//   清空用户信息
  user.$reset()
//   去首页
  router.push('/user/index')
}

// 搜索方法
const goToSearch = () => {
  search.updateSearch(searchInfo.value)
  router.push('/user/search')
}

getParent()
</script>

<style scoped>
.nav_bg {
  background-color: #333;
  line-height: 40px;
}

.nav_bg ul li {
  float: left;
  margin: 0 15px;
}

.nav_bg .user li {
  float: right;
}

a {
  color: #999;
  transition: color 0.3s;
}

a:hover {
  color: #FFF;
}

.search {
  padding-top: 20px;
}

.search_input {
  width: 300px;
  float: right;
}

.category {
  background-color: var(--theme-color);
  line-height: 50px;
}

.category li {
  float: left;
  padding: 0 25px;
}

.category li a {
  color: #FFFFFF;
  font-weight: bold;
}

.category li:hover {
  background-color: wheat;
}
</style>